<template>
  <div class="sortingOrder">
    <div class="sortTitle">新增分拣计划</div>
    <div class="sortingOrder_list">
      <div class="block">
        <span class="demonstration">分拣线</span>
        <el-cascader v-model="values" :options="options" @change="handleChange"></el-cascader>
      </div>
      <div class="block">
        <span class="demonstration">时间</span>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
        ></el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">上班人数</span>
 <el-input  v-model="worknum" placeholder="请输入上班人数" style="width:150px;"></el-input>
      </div>
      <div class="block">
        <span class="demonstration">班次</span>
        <el-select v-model="val" placeholder="请选择">
          <el-option v-for="item in opt" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="block">
        <span class="demonstration">分拣状态</span>
        <el-select v-model="stat" placeholder="请选择">
          <el-option
            v-for="item in state"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="block">
        <div class="yemian">
          <span class="title">商品名称</span>
          <div class="xuanzeqi">
            <el-select
              class="xaunze_1"
              v-model="zhi_1"
              placeholder="选择商品"
              @change="shangpin"
              @visible-change="yincang"
            >
              <el-option
                v-for="item in list_1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <div class="block" v-if="list_2" v-for="(item,index) in list_2" :key="index">
              <span class="demonstration">{{item.label}}</span>
              <div class="dainji" v-for="(zhi,i) in item.children" :key="i">
                <el-tag
                  class="tag"
                  effect="dark"
                  :type="zhi.cick?'':'info'"
                  @click="fuccck({biaoqian:index,xuanxiang:i,label:zhi.label})"
                >{{zhi.label}}</el-tag>
              </div>
            </div>
            <!-- <el-button class="anniu" type="primary" @click="tijiao">提交</el-button> -->
          </div>
        </div>

      </div>
    </div>
    
    <!-- <div class="block">
      <span class="demonstration">分拣主管</span>
      <el-select v-model="Managersname" placeholder="请选择">
        <el-option
          v-for="item in ManagersList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </div> -->
    <div class="box-message">
          <!-- <table class="table-box">
              <tr>
                  <td class="tite-td">商品ID</td>
                  <td class="tite-td">商品名称</td>
                  <td class="tite-td">商品规格</td> -->
                  <!-- <td class="tite-td">计量单位</td> -->
                  <!-- <td class="tite-td">商品数量</td> -->
                  <!-- <td class="tite-td">计划数量</td> -->
                  <!-- <td class="tite-td">完成数量</td> -->
                  <!-- <td class="tite-td">上班人数</td>
              </tr>
              <tr>
                  <td>{{goodsId}}</td>
                  <td>{{zhi_1}}</td>
                  <td>{{specificate}}</td> -->
                  <!-- <td>
                    <el-input class="td-inp" type="text" v-model="MeasureUnit" placeholder="请输入单位"></el-input>
                  </td> -->
                  <!-- <td>
                    <el-input class="td-inp" type="number" v-model="commoditynum" placeholder="请输入商品数量"></el-input>
                  </td> -->
                  <!-- <td>
                    <el-input class="td-inp" type="number" v-model="plannum" placeholder="请输入计划数量"></el-input>
                  </td> -->
                  <!-- <td>
                    <el-input class="td-inp" type="number" v-model="completenum" placeholder="请输入完成数量"></el-input>
                  </td> -->
                  <!-- <td>
                    <el-input class="td-inp" type="number" v-model="worknum" placeholder="请输入上班人数"></el-input>
                  </td>
              </tr>
          </table> -->
      </div>
      <div class="btn-box">
          <el-button size="mini" class="cleanbtn">取消</el-button>
          <el-button size="mini" type="primary" class="succeedbtn" @click="getsortplan">确认</el-button>
      </div>
  </div>
</template>

<script>
// 导入的其他文件 例如：import moduleName from 'modulePath';
import { queryGoods, supervisor, cascadeGoods, getSortingManagersList, getsortplan} from "@/api/user";
export default {
  //import所引入的组件注册
  components: {},

  data() {
    return {
      options: [],
      queryGood: [],
      goods: [],
      stat: [],
      opt: [
        { value: "1", label: "早班", id: 5 },
        { value: "2", label: "晚班", id: 8 }
      ],
      state: [
        { value: "0", label: "排产" },
        { value: "1", label: "加工" },
        { value: "2", label: "完成" }
      ],
      value1: "",
      inp3: "",
      val: [],
      values: [],
      radio1: "",
      list: [0],
      props: { multiple: true },
      //第一个选择器的值
      zhi_1: "",
      //第一个选择器的选项
      list_1: "",
      //第二个选择器的值
      zhi_2: [],
      //第二个选择器的选项
      list_2: [],
      //总的结果
      zonshu: [],
      zhi: [],
      specificate: '',//商品规格
      goodsName:'',
      ManagersList:[],
      Managersname:'',
      MeasureUnit:'',//计量单位
      commoditynum:0,//商品数量
      plannum:0,//计划数量
      completenum:0,//完成数量
      worknum:'',//上班数量
      goodsId:'',//商品id
    };
  },

  //监听属性
  computed: {},

  //监控data中的数据变化
  watch: {},

  //方法集合
  methods: {
    //这里
    handleItemChange(value) {
      console.log(value);
      let id = value[0];
      let goods = this.goods;
      console.log(id);
      cascadeGoods(id).then(res => {
        console.log(res);
        const mathValue = res.rows.map((v, i) => {
          console.log(v, i);
        });
        // let mathValue=res.rows
        // mathValue.forEach((v,i)=>{

        // console.log(v.label)

        // this.goods.label=v.label[i]
        // });
      });
    },
    queryGoods() {
      queryGoods().then(res => {
        //  console.log(res)
        this.goods = res.rows;
        this.goods.forEach((v, i) => {
          this.goods[i].children = [];
        });
      });
    },
    supervisor() {
      supervisor().then(res => {
        this.options = res.rows;
      });
    },
    fuccck(e) {
      let biaoqian = e.biaoqian;
      let xuanxiang = e.xuanxiang;
      let label = e.label;
      let caidan = this.list_2;
      for (var i = 0; i < caidan[biaoqian].children.length; i++) {
        if (i == xuanxiang) {
          caidan[biaoqian].children[xuanxiang].cick = !caidan[biaoqian]
            .children[xuanxiang].cick;
          /*    console.log(caidan[biaoqian].children[xuanxiang].cick, "111111"); */
        } else if (i !== xuanxiang) {
          caidan[biaoqian].children[i].cick = false;
          /*   console.log(caidan[biaoqian].children[i].cick, "2222"); */
        }
      }
      if (caidan[biaoqian].children[xuanxiang].cick == true) {
        this.zhi[biaoqian] = e.label;
      } else {
        this.zhi[biaoqian] = null;
      }
      this.list_2 = caidan;
      this.$forceUpdate();
      console.log("彩单", biaoqian, "项", xuanxiang, label, "改属性");
    },
    fuck() {
      let data = {};
      queryGoods(data).then(res => {
        console.log(res.rows, "第一个");
        this.list_1 = res.rows;
      });
    },
    shangpin(e) {
      let data = e;
      this.goodsId = data
      let list_1 = this.list_1;
      list_1.forEach((v,i)=>{
        if(data == v.value){
          this.zhi_1 = v.label
        }
      })
      cascadeGoods(data).then(res => {
        this.list_2 = res.rows;
      });
    },
    yincang(e) {
      if (e == true) {
        this.list_2 = [];
        this.zhi = []
        this.specificate = ''
      }
    },
    tijiao() {
      let list = this.zhi;
      let zhi = this.zhi_1
      let specificate = this.specificate
      list.forEach((v,i)=>{
        zhi += '/' + v
        specificate += v + ','
      })
      this.zhi_1 = zhi
      this.list_2 = []
      this.specificate = specificate.substring(0,specificate.length - 1)
           console.log(this.value1)
    },
    handleChange(value) {},
    //获取分拣主管列表
    getSortingManagersList(){
      getSortingManagersList().then(res =>{
        if(res.code == 20000){
          this.ManagersList = res.rows
        }
      })
    },
    //新增分拣单
    getsortplan(){
      //分拣时间
      let value1 = this.value1;
      //分拣线跟主管的id
      let value = this.values;
      //班次
      let val = this.val;
      console.log(value1)
      console.log(this.stat)
      console.log(this.values)
      if(value1 == '' || value1 == undefined){
        this.$message('请选择分拣时间')
        return
      }
      if(val == '' || val == undefined){
        this.$message('请选择班次')
        return
      }
      // if(this.plannum == '' || this.plannum == undefined){
      //   this.$message('请输入计划数量')
      //   return
      // }
      if(this.zhi_1 == '' || this.zhi_1 == undefined){
        this.$message('请选择商品')
        return
      }
      if(this.worknum == '' || this.worknum == undefined){
        this.$message('请填写上班人数')
        return
      }
      let data = {
        startTime: value1[0],
        endTime: value1[1],
        planCount: this.plannum,
        goodsName: this.zhi_1,
        specificate: this.specificate,
        workCount: this.worknum,
        sortStatus: this.stat,
        supervisorId: value[1],
        sortLineId: value[0],
        workType: val,
        goodsId: this.goodsId
      }
      getsortplan(data).then(res => {
        console.log(res)
        if(res.code == 20000){
          this.$router.push({
            name: 'menu1'
          })
        }
      })
    }
  },
  //挂载完成 访问DOM元素
  mounted() {
    this.queryGoods();
    this.supervisor();
    this.fuck();
    this.getSortingManagersList()
  },
  //更新之前
  beforeUpdate() {},
  //更新之后
  updated() {},
  //for keep-alive 缓存功能，组件被激活时调用
  activated() {},
  //for keep-alive 组件被移除时调用
  deactivated() {},
  //组件销毁之前调用
  beforeDestroy() {},
  //组件销毁之后调用
  destroyed() {}
};
</script>
<style lang='scss' scoped>
/* @import url(); 引入公共css类 */
.sortingOrder_list {
  display: flex;
  flex-wrap: wrap;
  .block {
    margin-bottom: 15px;
  }
}
.sortTitle {
  margin: 20px;
}
.demonstration {
  padding: 0 20px;
  box-sizing: border-box;
}
.searchInput {
  width: 200px;
  // height: 100px;
}
.block{
  display: inline-block;
  .dainji{
     display: inline-block;
     margin-right: 10px;
  }
}
.xuanzeqi{
  display: inline-block;
}
.title{
  padding: 0 20px;
}
.box-message{
        width: 100%;
        padding: 0 40px;
        box-sizing: border-box;
        margin-top: 40px;
        margin-bottom: 40px;
        .table-box{
            width: 100%;
            border: 1px solid #000;
            border-collapse:collapse;
            .tite-td{
                font-size: 16px;
                font-weight: bold;
            }
            td{
                width: 200px;
                height: 40px;
                text-align: center;
                border-bottom: 1px solid #000;
                border-right: 1px solid #000;
                .td-inp{
                  text-align: center;
                }
            }
        }
    }
    .btn-box{
        width: 100%;
        display: flex;
        justify-content: flex-end;
       padding-right: 40px;
       box-sizing: border-box;
        .cleanbtn{
            width: 100px;
            height: 40px;
        }
        .succeedbtn{
            width: 100px;
            height: 40px;
        }
    }
</style>